<style>
    .content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        height: 100vh;
    }

    .left {
        width: 100%;
        overflow: auto;
    }

    .left tr {

    }

    .left tr td {
        white-space: nowrap;
        width: 30px;
        height: 30px;
        overflow: hidden;
        text-align: center;
        font-size: 12px;
        border: 1px solid #ccc;
    }


    button {
        margin-top: 10px;
    }

    .div-ISelect {
        background-color: #009688;
    }

    .disable_td {
        background-color: #bfbfbf;
        color: #eee;
    }

    .right_li {
        display: flex;
        flex-direction: row;
    }

    .right_li li {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
    }
</style>
<div class="right_li">
    {volist name="money" id="vo"}
    <li style="color: #{$vo.color}">价格:{$vo.money} <span style="background-color: #{$vo.color};width: 10px;height: 10px;display: block;"></span>
    </li>
    {/volist}
</div>
<div class="content">

    <div class="left">
        <table id="tableId">
            {volist name="seat" id="vo"}
            <tr>
                {volist name="$vo" id="v"}
                {if condition="$v.Status eq '-1'"}
                <td></td>
                {else /}
                {if condition="$v.Status eq 2"}
                <td class="select select{$v.RowNum}x{$v.ColumnNum} disable_td" xcode="{$v.RowNum}"
                    ycode="{$v.ColumnNum}"
                    title="{$v.money}" >{$v.RowNum}-{$v.ColumnNum}
                </td>
                {else /}
                <td class="select select{$v.RowNum}x{$v.ColumnNum}" xcode="{$v.RowNum}" ycode="{$v.ColumnNum}"
                    title="{$v.money}" style="background-color: {$v.color}">{$v.RowNum}-{$v.ColumnNum}
                </td>
                {/if}
                {/if}
                {/volist}
            </tr>
            {/volist}
        </table>
    </div>
</div>


<script>
    var mouseDownFlag = false;
    var startTd, endTd;
    $(function () {


        window.onload = function () {
            οncοntextmenu = function () {
                return false
            }
            οndragstart = function () {
                return false
            }
            onselectstart = function () {
                return false
            }
            onbeforecopy = function () {
                return false
            }
            οnselect = function () {
                document.selection.empty()
            }
            οncοpy = function () {
                document.selection.empty()
            }
        }

        var tdsPos = getPos($("#tableId").children().eq(0));
        getRealPos(tdsPos);
        $("td").mousedown(function () {  //鼠标点击
            mouseDownFlag = true;
            startTd = this;
        });
        $("td").mouseup(function () {  //鼠标抬起
            mouseDownFlag = false;
            endTd = this;
            var obj = selectTd(tdsPos, startTd, endTd);
            var param = "";
            obj.containTds.forEach(function (item, key) {
                if (item.title.length != 0) {
                    param += item.title + ","
                }
            })
            if (param.length != 0) {
                hadmin.add("设置", "{:url('dialogOpen')}?data=" + param.substr(0, param.length - 1) + "&sid=" + {$sid}, "500", "300");
            }
            fillBackColor(obj);
        });
        $("td").mouseenter(function () {  //鼠标进入
            if (mouseDownFlag) {
                endTd = this;
                var obj = selectTd(tdsPos, startTd, endTd);
                fillBackColor(obj);
            }
        });

        //填充背景颜色
        function fillBackColor(obj) {
            $("td").css("background-color", "");
            var containTds = obj.containTds;
            for (var i = 0; i < containTds.length; i++) {
                $(containTds[i].ele).css("background-color", "#009688");
            }
        }

        //根据开始和结束单元格，获取选中的单元格
        function selectTd(tdsPos, startTd, endTd) {
            var obj = {startTd: startTd, endTd: endTd};
            var table = $(startTd).parent().parent();
            obj.startRowIdx = $(startTd).parent().prevAll().length;
            obj.startColIdx = $(startTd).prevAll().length;
            obj.endRowIdx = $(endTd).parent().prevAll().length;
            obj.endColIdx = $(endTd).prevAll().length;
            var containTds = [tdsPos[obj.startRowIdx][obj.startColIdx], tdsPos[obj.endRowIdx][obj.endColIdx]];
            obj.area = getMinArea(tdsPos, containTds);
            obj.containTds = containTds;
            return obj;
        }

        //根据包含的tds，获取最小区域坐标
        function getAreaByTds(tdsPos, containTds) {
            var area = {xMin: 99999, yMin: 99999, xMax: -1, yMax: -1};
            for (var i = 0; i < containTds.length; i++) {
                var xMin = Number(containTds[i].pos.x);
                var yMin = Number(containTds[i].pos.y);
                var xMax = Number(containTds[i].pos.x + containTds[i].colspan - 1);
                var yMax = Number(containTds[i].pos.y + containTds[i].rowspan - 1);
                area.xMin = Math.min(area.xMin, xMin);
                area.yMin = Math.min(area.yMin, yMin);
                area.xMax = Math.max(area.xMax, xMax);
                area.yMax = Math.max(area.yMax, yMax);
            }
            return area;
        }

        //根据包含的单元格确定最小区域
        function getMinArea(tdsPos, containTds) {
            var newTds = [];
            var targetArea = getAreaByTds(tdsPos, containTds);
            for (var i = 0; i < tdsPos.length; i++) {
                var tds = tdsPos[i];
                for (var j = 0; j < tds.length; j++) {
                    var td = tds[j];
                    var f = function (item) {
                        return item.pos.x == td.pos.x && item.pos.y == td.pos.y;
                    };
                    //只检查containTds还未包含的
                    if (!containTds.find(f)) {
                        var tdArea = {};
                        tdArea.xMin = td.pos.x;
                        tdArea.yMin = td.pos.y;
                        tdArea.xMax = td.pos.x + td.colspan - 1;
                        tdArea.yMax = td.pos.y + td.rowspan - 1;
                        var relation = getRelation(tdArea, targetArea);
                        if (relation != "不相交") {
                            newTds.push(td);
                        }
                    }
                }
            }
            if (newTds.length == 0) {
                return targetArea;
            }
            for (var i = 0; i < newTds.length; i++) {
                containTds.push(newTds[i]);
            }
            return getMinArea(tdsPos, containTds);
        }

        //获取单元格与指定区域内的关系，1.targetArea完全包含tdArea，2. targetArea与tdArea 部分重合 3. targetArea与tdArea不相交
        function getRelation(tdArea, targetArea) {
            //矩形各由两点(左上/右下)决定，使用屏幕坐标系
            //矩形   A (x1,y1),(x2,y2);
            var x1 = tdArea.xMin;
            var y1 = tdArea.yMin;
            var x2 = tdArea.xMax;
            var y2 = tdArea.yMax;
            //矩形   B   (x3,y3),(x4,y4);
            var x3 = targetArea.xMin;
            var y3 = targetArea.yMin;
            var x4 = targetArea.xMax;
            var y4 = targetArea.yMax;
            var m = (x1 > x4) | (x2 < x3);
            var n = (y2 < y3) | (y1 > y4);
            if (m | n) {
                //不相交
                return "不相交";
            } else {
                //相交
                if (x3 <= x1 && y3 <= y1 && x4 >= x2 && y4 >= y2) {
                    //targetArea完全包含tdArea
                    return "包含";
                } else {
                    //targetArea与tdArea 部分重合
                    return "部分重合";
                }
            }
            return "未定义关系";
        }

        /**获取单元格修正前的坐标位置 */
        function getPos(trParent) {
            var tdsPos = [];
            var trs = trParent.children();
            for (var i = 0; i < trs.length; i++) {
                var tr = trs.eq(i);
                var tds = tr.children();
                tdsPos[i] = [];
                for (var j = 0; j < tds.length; j++) {
                    var td = tds.eq(j);
                    var curRowIdx = $(td).parent().prevAll().length;
                    var curColIdx = $(td).prevAll().length;
                    var rowSpan = td.attr("rowSpan") ? Number(td.attr("rowSpan")) : 1;
                    var colSpan = td.attr("colSpan") ? Number(td.attr("colSpan")) : 1;
                    tdsPos[i][j] = {
                        title: td.html(),
                        xcode: td.attr('xcode'),
                        ycode: td.attr('ycode'),
                        pos: {x: curColIdx, y: curRowIdx}
                        ,
                        rowspan: rowSpan,
                        colspan: colSpan,
                        ele: td
                    };
                }
            }
            return tdsPos;
        }

        /**获取单元格真实的X坐标位置 */
        function getRealPos(headRows) {
            var findFieldRows = void 0;
            //计算同一行x的位置
            headRows.forEach(function (rowCols, y) {
                var nextPosx = 0;
                rowCols.forEach(function (col, x) {
                    col.pos = {};
                    col.pos.x = nextPosx;
                    col.pos.y = y;
                    col.colspan = col.colspan || 1;
                    nextPosx = nextPosx + col.colspan;
                });
            });
            //计算 rowspan对后边行的影响
            for (var rowIndex = headRows.length - 1; rowIndex >= 0; rowIndex--) {
                var curRow = headRows[rowIndex];
                for (var cellIndex = 0; cellIndex < curRow.length; cellIndex++) {
                    var curCell = curRow[cellIndex];
                    //console.log("正在处理的行：=》", curCell);
                    curCell.rowspan = curCell.rowspan || 1;
                    if (curCell.rowspan > 1) {
                        //将后边行中所有与当前cell相同位置的单元格依次后移当前单元格x相等的单元格后移当前单元格clospan个单位
                        //当前行影响以后（被rowspan包含）所有的行
                        for (var nextRowindex = rowIndex + 1; nextRowindex < headRows.length && curCell.rowspan > nextRowindex - rowIndex; nextRowindex++) {
                            //判断是否存在合并信息
                            var nextRow = headRows[nextRowindex];
                            for (var nextCellIndex = 0; nextCellIndex < nextRow.length; nextCellIndex++) {
                                var nextCell = nextRow[nextCellIndex];
                                if (nextCell.pos.x >= curCell.pos.x) {
                                    nextCell.pos.x += curCell.colspan;
                                    //console.log("需要移动的列：=》", nextCell);
                                }
                            }
                        }
                    }
                }
            }
        }
    });

</script>
